<template>
  <div id="v1">
    <my-foor></my-foor>
    <!-- 页头html -->
    <div class="head" id="guding">
      <div class="logo">
        <div class="logobox">
          <img src="../assets/header.png" title="索菲亚" alt="索菲亚" />
        </div>
      </div>
      <div class="navi">
        <!-- 根据当前页面所属类别，给对应的大类li和子类li标签加上class="on" -->
        <ul>
          <li class="on">
            <router-link to="/">首页</router-link>
            <ul></ul>
          </li>
          <li><router-link to="/page">关于我们</router-link></li>
          <li>
            <router-link to="/brand">品牌力</router-link>
            <ul>
              <!-- 科技 -->
              <li><router-link to="/brand">生产经营 </router-link></li>

              <li><router-link to="">品牌轨迹 </router-link></li>

              <li><router-link to="/honor">企业荣誉 </router-link></li>

              <li><router-link to="">销售网络</router-link></li>

              <li><router-link to="/serve"> 全流程服务</router-link></li>
              <li><router-link to="/fabricate">智能制造</router-link></li>
            </ul>
          </li>
          <li>
            <router-link to="/product">产品力</router-link>
            <ul>
              <li><router-link to="product">新品展示</router-link></li>

              <li><router-link to="">时尚设计</router-link></li>

              <li><router-link to="">环保生活</router-link></li>
            </ul>
          </li>
          <li>
            <router-link to="">投资者关系</router-link>
            <ul>
              <li><router-link to="">信息披露</router-link></li>
              <li>
                <router-link to=""> 公司治理</router-link>
              </li>
              <li><router-link to="">基本数据</router-link></li>
              <li>
                <router-link to=""> 投资者教育</router-link>
              </li>
              <li><router-link to="">投资者接待</router-link></li>
              <li><router-link to="">投资者保护</router-link></li>
            </ul>
          </li>
          <li>
            <router-link to="/society">社会责任</router-link>
            <ul>
              <li><router-link to="/society">抗疫行动</router-link></li>

              <li><router-link to="">稀捍行动</router-link></li>

              <li><router-link to="">希望行动</router-link></li>

              <li><router-link to="">关爱行动</router-link></li>
            </ul>
          </li>
          <li>
            <router-link to="">新闻中心</router-link>
            <ul>
              <li><router-link to="">企业动态</router-link></li>

              <li><router-link to="">媒体报道</router-link></li>

              <li><router-link to="">企业年刊</router-link></li>
            </ul>
          </li>
        </ul>
      </div>

      <router-view />
    </div>

    <video autoplay loop muted>
      <source src="/video/111.mp4" type="video/mp4" />
    </video>

    <div class="login_r">
      <div class="login_btn">
        <a class="on user_bt" href="javascript:;">修改密码</a>
      </div>
      <div class="user_form">
        <form action="" method="POST" name="tForm" class="user_login">
          <div class="in_name">
            <input v-model="phone" name="username" type="text" placeholder="请输入手机号" @blur.native.capture="checkPhone" />
            <p>{{msg1}}</p>
          </div>
          <div class="in_password">
            <input v-model="upwd" name="password" type="password" placeholder="请输入原始密码" @blur.native.capture="checkPwd" />
            <p>{{msg2}}</p>
          </div>
          <div class="in_password">
            <input v-model="newUpwd" name="password" type="password" placeholder="请输入新密码" @blur.native.capture="checkNupwd" />
            <p>{{msg2}}</p>
          </div>
          <div  @click="checkForm" class="login_bt" id="loginBtn"><div id="text1">确认修改</div></div>
        </form>
      </div>
    </div>

    <div class="fbq">
      索菲亚家居股份有限公司　保留所有版权© 2021　<a
        href="http://beian.miit.gov.cn"
        target="_blank"
        >粤ICP备10048445号</a
      >
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      phone:'',
      upwd:'',
      newUpwd:'',
      msg1:'请输入11位有效数字',
      msg2:'6~16个字符，区分大小写'
    }
  },
  methods: {
      checkPhone(){
           let reg=/^[1][3-9][0-9]{9}$/;
           if(reg.test(this.phone)){
               this.msg1="手机号格式正确";
               return true;
           }else{
               this.msg1="手机号格式错误";
               alert('手机号格式有误');
               return false;
           }
        },
        checkPwd(){
            if(this.checkPhone()){
              this.axios.post('/update',
                  `phone=${this.phone}&upwd=${this.upwd}`).then(res=>{
                  // console.log(res);
                  if (res.data.code==200) {  //查找成功
                      this.msg1="密码正确";                
                      return true;
                  }else{  //
                      alert("密码错误，请重新输入");
                  }
              })
          }
        },
        checkNupwd(){
          if(this.checkPwd()){
            let reg=/^[0-9a-zA-Z]{6,16}$/;
            if(reg.test(this.newUpwd)){
                this.msg2='密码格式正确';
                this.upwd=this.newUpwd;
                return true;
            }else{
                this.msg2='密码格式错误';
                alert('密码格式有误');
                return false;
            }
          }
        },
      checkForm(){
        if(this.checkNupwd()){
          this.axios.post('/update',
                  `phone=${this.phone}&upwd=${this.upwd}`).then(res=>{
                  // console.log(res);
                  if (res.data.code==200) {  //密码修改成功 
                    alert('密码修改成功，请重新登录');               
                    this.$router.push('/mylogin');
                  }
              })
          }
        }
              
      } 
  }

</script>
<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
video {
  position: fixed;
  right: 0px;
  bottom: 0px;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: 100%;

  /*加滤镜*/
  filter: blur(5px);

  /*背景模糊设置 */
  /* -webkit-filter: grayscale(100%); */

  /*背景灰度设置*/
  /* filter:grayscale(1%); */
  z-index: -1;
}
source {
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
}
#container {
  display: none;
}
.user_login p {
  font-size: 12px;
  color: #999999;
}
.goto_reg {
  text-align: center;
  color: #f1b346;
}
.goto_reg a {
  color: #f1b346;
}
.in_name input,
.in_password input {
  border: 1px solid white;
  background-color: #f4eae0;
  outline: 0;
  border-radius: 5px;
  width: 265px;
  height: 48px;
  padding-left: 48px;
}
.in_name input {
    background: #f4eae0 url(/banner/text2.png) center left 12px no-repeat;
}
.in_password input {
  background: #f4eae0 url(/banner/pwd.png) center left 12px no-repeat;
}
.in_name,
.in_password {
  margin: 10px 0;
}
.login_bt{
  width: 265px;
  height: 48px;
  background-color: rgb(54, 141, 223);
  position: relative;
  border-radius: 6px;
}
#text1{
  font-size: 16px;
  color: #f1efec;
  position: absolute;
  top: 25%;
  left: 38%;
}
button {
  border: 0;
  margin: 3px 0;
  color: #ffffff;
  background-color: #ddb97b;
  width: 265px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  border-radius: 5px;
}
.login_r {
  width: 350px;
  height: 420px;
  padding: 45px;
  background: #fcf6f6;
  position: fixed;
  top: 100px;
  right: 120px;
  overflow: hidden;
}

/* 头部 */
#guding {
  height: 90px;
  position: fixed;
  top: -20px;
  left: 0;
  background: rgba(255, 255, 255, 0.95);
  z-index: 99;
}
.head {
  width: 100%;
  height: 110px;
  background: rgba(255, 255, 255, 0.95);

  display: block;
}

.logo {
  width: 400px;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
  /* margin: 32px 0 0 270px; */
  float: left;
}
.logobox img {
  width: 100%;
}
.logobox {
  width: 150px;
}

/*å¯¼èˆªæ */

.navi,
.navi ul,
.navi ul li,
.navi ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.navi {
  height: 60px;
  float: left;
  padding-top: 38px;
}

.navi > ul > li {
  float: left;
  margin: 0 38px;
}

.navi > ul > li:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 1px;
  left: 0;
  top: 5px;
  z-index: 9;
  background: transparent;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.navi > ul > li:hover,
.navi > ul > li.on {
  color: #b58c3c;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.navi > ul > li:hover:after,
.navi > ul > li.on:after {
  width: 100%;
  background: #cfa346;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.navi > ul > li > a {
  color: #b58c3c;
  font-size: 15px;
  line-height: 65px;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.navi > ul > li:hover > a,
.navi > ul > li.on > a {
  color: #b58c3c;
}

.navi ul ul {
  width: 180px;
  position: absolute;
  left: -9999px;
  z-index: 1000;
}

.navi li:hover > ul {
  left: -30px;
}

.navi ul ul ul {
  margin-left: 100%;
  top: 0;
}

.navi ul ul li {
  height: 0;
  -webkit-transition: height 0.3s ease;
  -moz-transition: height 0.3s ease;
  -ms-transition: height 0.3s ease;
  -o-transition: height 0.3s ease;
  transition: height 0.3s ease;
}

.navi ul ul li:after {
  content: "";
  background: url(https://file.suofeiya.com.cn/v/ac103cf2-4443-44b4-a9d1-a65b84bf8a81)
    left center no-repeat;
  position: absolute;
  width: 1px;
  height: 7px;
  right: 10px;
  top: 22px;
  z-index: 9;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.navi ul li:hover > ul > li {
  height: 50px;
}

.navi ul ul li a {
  padding: 20px 0 20px 30px;
  font-size: 14px;
  background: #f1e8da;
  text-decoration: none;
  color: #775043;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.navi ul ul li:hover > a,
.navi ul ul li a:hover,
.navi ul ul li.on a {
  color: #b58c3c;
  background: #b49c8e;
  font-weight: bold;
}

.navi ul ul li:hover:after,
.navi ul ul li.on:after {
  width: 36px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.navi ul ul li.on:after {
  width: 0px;
}

@media screen and (max-width: 1680px) {
  .logo {
    width: 330px;
    /* margin: 30px 0 0 180px; */
  }
}
@media screen and (max-width: 1500px) {
  .logo {
    width: 350px;
    /* margin: 30px 0 0 150px; */
  }
  .navi > ul > li {
    margin: 0 35px;
  }
  .navi ul ul li a {
    padding: 15px 0 15px 30px;
    font-size: 12px;
  }
  .navi ul li:hover > ul > li {
    height: 40px;
  }
  .navi ul ul li:after {
    top: 15px;
  }
  .navi ul ul {
    width: 160px;
  }
  .topbar img {
    height: 16px;
  }
}
@media screen and (max-width: 1366px) {
  .head {
    height: 100px;
  }
  .logo {
    width: 220px;
    /* margin: 25px 0 0 80px; */
  }
  .navi {
    padding-top: 28px;
  }
  .navi > ul > li {
    margin: 0 30px;
  }
  .navi > ul > li > a {
    font-size: 14px;
  }
}

/* 底部长条 */
.fbq {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 12px;
  width: 100%;
  height: 35px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.7);
  color: #aaa;
  text-align: center;
  line-height: 35px;
}
</style>
